<template>
	<div>
		<div class="title">周末去哪儿</div>
		<ul>
			<li class="item border-bottom" v-for="item of list" :key="item.id" >
				<div class="item-img-wraper">
					<img class="item-img" :src="item.imgUrl">
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>	
</template>

<script>
export default{
	name: 'HomeWeekend',
	props: {
		list: Array
	},
	data: function() {
		return {
			recommendList: [{
          		id: '0001',
          		imgUrl: 'http://img1.qunarzz.com/sight/source/1811/6d/5afbf529076ef6.jpg_r_640x214_7414b151.jpg',
          		title: '孝感白兆山(AAAA景区)',
          		desc: '白兆山又名碧山，位于安陆市区西北15公里，总面积10平方公里，主峰海拔383米，是湖北安陆古银杏国家森林公园的一部分，曾是唐代著名大诗人李白“酒隐安陆、蹉跎十年”之地，现存与李白有关的遗址遗迹18处。白兆山李白文化文化旅游区由安陆市立强旅游风景开发有限公司投资2.5亿打造，规划建设碧山湖休闲度假区、张家湾民俗展示区、滴水岩茶酒文化区、太白峰宗教文化区、绀珠泉李白纪念区和大安山生态保护区6大功能区，这些都使白兆山李白文化旅游区成为人们寻觅李白仙踪。'
			},{
          		id: '0002',
          		imgUrl: 'http://img1.qunarzz.com/sight/source/1811/6d/5afbf529076ef6.jpg_r_640x214_7414b151.jpg',
          		title: '孝感白兆山(AAAA景区)',
          		desc: '白兆山又名碧山，位于安陆市区西北15公里，总面积10平方公里，主峰海拔383米，是湖北安陆古银杏国家森林公园的一部分，曾是唐代著名大诗人李白“酒隐安陆、蹉跎十年”之地，现存与李白有关的遗址遗迹18处。白兆山李白文化文化旅游区由安陆市立强旅游风景开发有限公司投资2.5亿打造，规划建设碧山湖休闲度假区、张家湾民俗展示区、滴水岩茶酒文化区、太白峰宗教文化区、绀珠泉李白纪念区和大安山生态保护区6大功能区，这些都使白兆山李白文化旅游区成为人们寻觅李白仙踪。'
			},{
          		id: '0003',
          		imgUrl: 'http://img1.qunarzz.com/sight/source/1811/6d/5afbf529076ef6.jpg_r_640x214_7414b151.jpg',
          		title: '孝感白兆山(AAAA景区)',
          		desc: '白兆山又名碧山，位于安陆市区西北15公里，总面积10平方公里，主峰海拔383米，是湖北安陆古银杏国家森林公园的一部分，曾是唐代著名大诗人李白“酒隐安陆、蹉跎十年”之地，现存与李白有关的遗址遗迹18处。白兆山李白文化文化旅游区由安陆市立强旅游风景开发有限公司投资2.5亿打造，规划建设碧山湖休闲度假区、张家湾民俗展示区、滴水岩茶酒文化区、太白峰宗教文化区、绀珠泉李白纪念区和大安山生态保护区6大功能区，这些都使白兆山李白文化旅游区成为人们寻觅李白仙踪。'
			}]
		}
	}
}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/mixins.styl'
	.title{
		margin-top: .2rem;
		line-height: .8rem;  //40px
		background: #eee;
		text-indent: .2rem;
	}
	.item-img-wraper{
		overflow: hidden;
		height: 0;
		padding-bottom: 38%; //imgUrl快高比为33.4%,214/640=0.334375，142.53/375=0.38008
	}
		.item-img{
			width: 100%;	
		}
	.item-info{
		flex: 1;
		padding: .1rem;
		min-width: 0;  //设置段落的最小宽度,保证内容不超出外层容器
	}
		.item-title{
			line-height: .54rem; //29px
			font-size: .32rem;  //16px
		}
		.item-desc{
			line-height: .4rem; //20px
			color: #ccc;
			ellipsis()
		}
		.item-button{
			line-height: .44rem; //22px
			margin-top: .16rem; //8px
			background:#ff9300;
			padding: 0 .1rem;
			border-radius: .06rem; //3px
		}
</style>